<template>
  <div>
    <!--资产列表-->
    <div class="asset-list">
      <row type="flex" justify="space-around" class="code-row-bg">
        <i-col span="24">
          <div class="dashboard-container">
            <div class="container">
              <div
                  class="tableBar"
                  style="display: inline-block"
              >
                <el-button
                    type="primary"
                    class="continue"
                    @click="addClass()"
                >
                  新增安全资产
                </el-button>
              </div>
            <el-dialog
                :title="assetData.title"
                v-model="assetData.dialogVisible"
                width="30%"
                :before-close="handleClose"
                align-center
            >
              <el-form
                  class="demo-form-inline"
                  label-width="100px"
              >
                <el-form-item label="资产编号：">
                  <el-input v-model="assetData.assetNo" placeholder="请输入资产编号"/>
                </el-form-item>
                <el-form-item label="资产型号：">
                  <el-input v-model="assetData.assetTypeNo" placeholder="请输入资产型号" />
                </el-form-item>
                <el-form-item label="资产名：">
                  <el-input v-model="assetData.assetName" placeholder="请输入资产名" />
                </el-form-item>
                <el-form-item label="所属组织：">
                  <el-select v-model="assetData.belongOrg" placeholder="请选择资产所属组织">
                    <el-option v-for="org in Orgs" :key="org.id" :label="org.orgName" :value="org.id" />
                  </el-select>
                </el-form-item>
              </el-form>

              <span
                  slot="footer"
                  class="dialog-footer"
              >

              <el-button
                type="primary"
                size="default"
                @click="submitForm()"
              >确 定</el-button>
                <el-button
                    type="primary"
                    size="default"
                    @click="assetData.dialogVisible = false"
                >取 消</el-button>
          </span>
            </el-dialog>
          </div>
          <asset-list :list="list" :title="listTitle">
          </asset-list>
          <div class="demo-pagination-block">
            <el-pagination
                v-model:current-page="current"
                :small="small"
                :disabled="disabled"
                :background="background"
                :page-count="pageNum"
                prev-text="上一页"
                next-text="下一页"
                layout="total, prev, pager, next"
                :total="counts"
                @current-change="handleCurrentChange"
            />
            </div>
          </div>
        </i-col>
      </row>
    </div>

  </div>
</template>
<style scoped>
.container {
  display: flex;
  justify-content:center;
}
.tableBar {
  width: 1024px;
  display: flex ! important;
  justify-content: space-between;
  padding: 10px 0;
}
.container .tableBar > *{
  margin: 0 20px;
}
.asset-list {
  position: relative;
  text-align: center;
}
.el-pagination {
  padding: 10px;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<script>
import AssetList from "@/components/AssetList.vue";
import {Row} from "view-ui-plus";
import {Search} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import input from "view-ui-plus/src/components/input/index.js";

export default {
  name: 'Assets',
  computed: {
    input() {
      return input
    },
    Search() {
      return Search
    }
  },
  components: {
    Row,
    AssetList
  },
  data() {
    return {
      pageNum:1,
      counts: 0,
      current:1,
      list: [],
      Orgs:[
          {
            'id':0,
            'orgName':'',
            'fatherOrg':''
          }
          ],
      listTitle: '所有资产',
      small: false,
      background: false,
      disabled: false,
      assetData: {
        'title': '添加安全资产',
        'dialogVisible': false,
        'assetNo': '',
        'assetTypeNo': '',
        'assetName': '',
        'belongOrg' : 0,
      },
      input:''
    }
  },
  created: function () {
    this.$api.get('asset/getAssets/' + this.current).then((res) => {
      if (String(res.code) === '1') {
        this.list = res.data.records
        this.pageNum = res.data.pages
        this.current = res.data.current
        this.counts = res.data.total

      } else {
        this.$message.error(res.msg || '操作失败')
      }
    }).catch(err => {
      this.$message.error('请求出错了：' + err)
    })

  },
  methods: {
    handleCurrentChange(val) {
      this.$api.get('asset/getAssets/' + val).then((res) => {
        if (String(res.code) === '1') {
          this.list = res.data.records
          this.pageNum = res.data.pages
          this.current = res.data.current
          this.counts = res.data.total

        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
    },
    addClass() {
      this.$api.get('assetOrg/getAll').then((res) => {
        console.log(res.data)
        this.Orgs = res.data
        console.log(this.Orgs)
      })
      this.assetData.title = '新增安全资产'
      this.action = 'add'
      this.assetData.assetNo = ''
      this.assetData.assetName = ''
      this.assetData.assetTypeNo = ''
      this.assetData.belongOrg = ''
      this.assetData.dialogVisible = true
    },
    //数据提交
    submitForm() {
      let data = {
        assetNo: this.assetData.assetNo,
        assetTypeNo: this.assetData.assetTypeNo,
        assetName: this.assetData.assetName,
        belongOrg: this.assetData.belongOrg
      }
      this.$api.post('asset/add', data).then((res) => {
        console.log(res.data)
        this.$Notice.info({
          title: '提示',
          desc: res.msg
        });
        this.assetData.dialogVisible = false
      })
    },
    handleClose(done) {
      ElMessageBox.confirm('是否确认关闭?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
  }
}
</script>